<template>
	<view class="gui-bg-black gui-padding">

		<view>
			<view class="gui-text-center gui-color-white gui-h2">会员权益</view>
		</view>
		<view style="margin-top:66rpx;" class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top">
			<view class="gui-flex gui-rows gui-nowrap gui-border-l gui-border-t gui-bg-gray gui-dark-bg-level-2">
				<text class="gui-td gui-border-r gui-border-b gui-primary-text gui-text-center">权益</text>
				<text class="gui-td gui-border-r gui-border-b gui-primary-text gui-text-center">普通VIP</text>
				<text class="gui-td gui-border-r gui-border-b gui-primary-text gui-text-center">VIP</text>
				<text class="gui-td gui-border-r gui-border-b gui-primary-text gui-text-center">超级VIP</text>
			</view>
			<view class="gui-flex gui-rows gui-nowrap gui-border-l" v-for="x in projects">
				<text class="gui-td gui-primary-text gui-text-center gui-border-r gui-border-b">{{x.vip_project}}</text>
				<text class="gui-td gui-primary-text gui-text-center gui-border-r gui-border-b">{{x.vip_putong}}{{x.vip_danwei}}</text>
				<text class="gui-td gui-primary-text gui-text-center gui-border-r gui-border-b">{{x.vip_vip}}{{x.vip_danwei}}</text>
				<text class="gui-td gui-primary-text gui-text-center gui-border-r gui-border-b">{{x.vip_chaoji}}{{x.vip_danwei}}</text>
			</view>
			

		</view>
		<view>
			<view class="gui-text-center gui-color-white gui-h2 gui-margin-top">会员开通</view>

			<view class=" gui-color-white gui-h5 gui-margin-top">会员类型</view>

			<view class="gui-flex vip-type gui-margin-top">

				<view class="gui-padding gui-text-center gui-primary-text gui-border-radius gui-flex1 gui-bold" 
					style="margin-right: 10rpx;" :class="{'tab-active':this.vipType=='vip_putong'}" @click="changeTpye('vip_putong')">普通VIP</view>
				<view class="gui-padding gui-text-center gui-primary-text  gui-border-radius  gui-flex1  gui-bold"
					style="margin-right: 10rpx;" :class="{'tab-active':this.vipType=='vip_vip'}" @click="changeTpye('vip_vip')">VIP</view>
				<view class="gui-padding gui-text-center gui-primary-text  gui-border-radius  gui-flex1  gui-bold"
					style="margin-right: 10rpx;" :class="{'tab-active':this.vipType=='vip_chaoji'}" @click="changeTpye('vip_chaoji')">超级VIP</view>

			</view>

			<view class=" gui-color-white gui-h5 gui-margin-top">会员时长</view>

			<view class="gui-flex gui-margin-top">

				<view class="gui-text-center gui-primary-text gui-bold gui-bg-white" :class="{'tab-active':this.duration==1}"
					style="margin-right: 10rpx;;width: 150rpx;" @click="changeDuration(1)">一个月</view>
				<view class="gui-text-center gui-primary-text    gui-bold  gui-bg-white" :class="{'tab-active':this.duration==6}"
					style="margin-right: 10rpx;;width: 150rpx;" @click="changeDuration(6)">半年</view>
				<view class=" gui-text-center gui-primary-text   gui-bold  gui-bg-white" :class="{'tab-active':this.duration==12}"
					style="margin-right: 10rpx;width: 150rpx;" @click="changeDuration(12)">一年</view>

			</view>

	
	<view class="gui-text-center gui-h2 gui-margin-top" style="color: #F4E7DD;">￥{{price}}</view>
		</view>
		
		
		
		<view class="gui-padding">
			
			<view class="gui-color-black gui-text-center gui-padding gui-border-radius" style="background-image: linear-gradient(to right, #F4E7DD, #DCC7AC);" @click="goPay">去支付</view>
			
		</view>
		


	</view>
</template>

<script>
	export default {
		data() {
			return {
				projects:[],
				vip_price:'',
				price:99.99,
				// 会员类型
				vipType:'vip_putong',
				// 时长
				duration:1,
			}
		},
		onLoad(e) {
			var self = this;
			uni.gRequest.get("vip/list").then(result=>{
				self.projects = result.rows;
				self.vip_price = self.projects[self.projects.length-1];
				self.price = parseFloat(self.vip_price[self.vipType]) * parseFloat(self.duration);

			})
		},
		methods: {
			changeTpye(i){
				this.vipType = i;
				this.price = parseFloat(this.vip_price[this.vipType]) * parseFloat(this.duration);
			},
			changeDuration(i){
				this.duration = i;
				this.price = parseFloat(this.vip_price[this.vipType]) * parseFloat(this.duration);
			},
			goPay(){
				uni.showToast({
					 title: '因权限问题，暂时无法支付...',
					 icon: 'none'
				});
			}
		}
	}
</script>

<style scoped>
	.gui-td {
		width: 100rpx;
		flex: 1;
		overflow: hidden;
		padding: 20rpx 0rpx;
		display: flexbox;
	}

	.gui-primary-text {
		line-height: 60rpx !important;
		font-size: 24rpx;
	}

	.vip-type .gui-padding {
		background-image: linear-gradient(to right, #F4E7DD, #DCC7AC);
	}

	.tab-active {
		border: 2px solid indianred;
	}
</style>